<template>
  <div class="writer-create-page">
    <div class="writer-layout">
      <!-- 左侧边栏：作品管理 -->
      <div class="writer-sidebar">
        <div class="sidebar-header">
          <el-dropdown trigger="click" @command="handleCommand">
            <div class="current-book">
              <span class="book-name">{{ currentBook.name }}</span>
              <i class="el-icon-arrow-down"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="book in myBooks" :key="book.id" :command="['switchBook', book.id]">
                {{ book.name }}
              </el-dropdown-item>
              <el-dropdown-item divided command="newBook">创建新作品</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        
        <div class="sidebar-content">
          <div class="chapter-tools">
            <el-button type="text" icon="el-icon-plus" @click="createNewChapter">新建章节</el-button>
            <el-button type="text" icon="el-icon-s-operation">章节管理</el-button>
          </div>
          
          <div class="chapter-list">
            <el-tree
              :data="chapters"
              node-key="id"
              :props="defaultProps"
              :highlight-current="true"
              @node-click="handleNodeClick">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span class="chapter-title">{{ node.label }}</span>
                <span class="chapter-info">
                  <el-tag size="mini" :type="data.status === 'published' ? 'success' : 'info'">
                    {{ data.status === 'published' ? '已发布' : '草稿' }}
                  </el-tag>
                  <span class="word-count">{{ data.wordCount }}字</span>
                </span>
              </span>
            </el-tree>
          </div>
        </div>
      </div>

      <!-- 主编辑区域 -->
      <div class="writer-main">
        <div class="editor-header">
          <div class="header-left">
            <el-input
              v-model="currentChapter.title"
              placeholder="请输入章节标题"
              class="chapter-title-input">
            </el-input>
          </div>
          <div class="header-right">
            <el-button-group class="view-mode-group">
              <el-tooltip content="编辑模式" placement="top">
                <el-button :type="viewMode === 'edit' ? 'primary' : ''" icon="el-icon-edit" @click="viewMode = 'edit'"></el-button>
              </el-tooltip>
              <el-tooltip content="预览模式" placement="top">
                <el-button :type="viewMode === 'preview' ? 'primary' : ''" icon="el-icon-view" @click="viewMode = 'preview'"></el-button>
              </el-tooltip>
              <el-tooltip content="对比模式" placement="top">
                <el-button :type="viewMode === 'split' ? 'primary' : ''" icon="el-icon-s-unfold" @click="viewMode = 'split'"></el-button>
              </el-tooltip>
            </el-button-group>
            
            <el-button-group class="action-group">
              <el-button type="primary" @click="saveChapter" :loading="saving">保存</el-button>
              <el-button type="success" @click="publishChapter">发布</el-button>
            </el-button-group>
          </div>
        </div>

        <div class="editor-main" :class="viewMode">
          <div class="editor-container" :class="{ 'half-width': viewMode === 'split' }">
            <div class="editor-toolbar">
              <el-button-group>
                <el-button icon="el-icon-bold" title="加粗"></el-button>
                <el-button icon="el-icon-italic" title="斜体"></el-button>
                <el-button icon="el-icon-underline" title="下划线"></el-button>
              </el-button-group>
              <el-divider direction="vertical"></el-divider>
              <el-button-group>
                <el-button icon="el-icon-s-operation" title="标题"></el-button>
                <el-button icon="el-icon-menu" title="列表"></el-button>
                <el-button icon="el-icon-chat-line-square" title="引用"></el-button>
              </el-button-group>
              <el-divider direction="vertical"></el-divider>
              <el-button-group>
                <el-button icon="el-icon-picture" title="插入图片"></el-button>
                <el-button icon="el-icon-link" title="插入链接"></el-button>
                <el-button icon="el-icon-table-2" title="插入表格"></el-button>
              </el-button-group>
            </div>
            <div class="editor-content">
              <el-input
                type="textarea"
                v-model="currentChapter.content"
                :rows="20"
                resize="none"
                placeholder="请输入章节内容...">
              </el-input>
            </div>
          </div>
          
          <div v-if="viewMode !== 'edit'" class="preview-container" :class="{ 'half-width': viewMode === 'split' }">
            <div class="preview-content markdown-body" v-html="renderedContent"></div>
          </div>
        </div>

        <div class="editor-footer">
          <div class="footer-left">
            <span class="word-count">字数：{{ currentChapter.wordCount }}</span>
            <span class="save-status">{{ saveStatus }}</span>
          </div>
          <div class="footer-right">
            <el-tooltip content="写作目标" placement="top">
              <el-progress :percentage="writingProgress" :format="progressFormat"></el-progress>
            </el-tooltip>
          </div>
        </div>
      </div>

      <!-- 右侧工具栏 -->
      <div class="writer-tools">
        <div class="tools-section">
          <div class="section-title">写作助手</div>
          <div class="tools-content">
            <el-collapse v-model="activeTools">
              <el-collapse-item title="大纲视图" name="outline">
                <div class="outline-tree">
                  <el-tree :data="outlineData" :props="outlineProps"></el-tree>
                </div>
              </el-collapse-item>
              <el-collapse-item title="写作笔记" name="notes">
                <div class="quick-notes">
                  <el-input
                    type="textarea"
                    v-model="quickNote"
                    placeholder="记录灵感和想法..."
                    :rows="4">
                  </el-input>
                </div>
              </el-collapse-item>
              <el-collapse-item title="素材库" name="materials">
                <div class="material-list">
                  <div v-for="(material, index) in materials" :key="index" class="material-item">
                    <div class="material-title">{{ material.title }}</div>
                    <div class="material-preview">{{ material.preview }}</div>
                  </div>
                  <el-button type="text" icon="el-icon-plus">添加素材</el-button>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>

        <div class="tools-section">
          <div class="section-title">智能助手</div>
          <div class="tools-content">
            <el-button-group class="ai-tools">
              <el-tooltip content="智能纠错" placement="top">
                <el-button icon="el-icon-check">错别字检查</el-button>
              </el-tooltip>
              <el-tooltip content="智能润色" placement="top">
                <el-button icon="el-icon-magic-stick">文字优化</el-button>
              </el-tooltip>
              <el-tooltip content="智能续写" placement="top">
                <el-button icon="el-icon-edit">AI续写</el-button>
              </el-tooltip>
            </el-button-group>
          </div>
        </div>
      </div>
    </div>

    <!-- 新建作品对话框 -->
    <el-dialog title="创建新作品" :visible.sync="newBookDialogVisible" width="500px">
      <el-form :model="newBookForm" label-width="80px">
        <el-form-item label="作品名称">
          <el-input v-model="newBookForm.name" placeholder="请输入作品名称"></el-input>
        </el-form-item>
        <el-form-item label="作品类型">
          <el-select v-model="newBookForm.category" placeholder="请选择作品类型" style="width: 100%">
            <el-option
              v-for="item in categories"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="作品简介">
          <el-input
            type="textarea"
            v-model="newBookForm.description"
            :rows="4"
            placeholder="请输入作品简介">
          </el-input>
        </el-form-item>
        <el-form-item label="写作目标">
          <el-input-number
            v-model="newBookForm.targetWords"
            :min="1"
            :max="1000"
            label="写作目标（万字）">
          </el-input-number>
          <span class="unit">万字</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="newBookDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="createNewBook">创建</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'WriterCreate',
  data() {
    return {
      // 视图模式：edit-纯编辑，preview-预览，split-对比
      viewMode: 'edit',
      // 当前作品信息
      currentBook: {
        id: 1,
        name: '无尽的世界',
        wordCount: 150000,
        targetWords: 500000
      },
      // 我的作品列表
      myBooks: [
        { id: 1, name: '无尽的世界' },
        { id: 2, name: '都市之巅' },
        { id: 3, name: '仙途漫漫' }
      ],
      // 当前章节信息
      currentChapter: {
        id: 1,
        title: '第一章 初入修仙界',
        content: '',
        wordCount: 0,
        status: 'draft'
      },
      // 章节列表数据
      chapters: [{
        id: 1,
        label: '第一章 初入修仙界',
        wordCount: 3200,
        status: 'published'
      }, {
        id: 2,
        label: '第二章 灵气觉醒',
        wordCount: 2800,
        status: 'draft'
      }],
      // 章节树配置
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 大纲数据
      outlineData: [{
        label: '主线剧情',
        children: [{
          label: '主角背景'
        }, {
          label: '修炼体系'
        }]
      }],
      outlineProps: {
        label: 'label'
      },
      // 素材库
      materials: [
        {
          title: '修仙境界设定',
          preview: '练气、筑基、金丹、元婴、化神...'
        },
        {
          title: '主要人物性格',
          preview: '性格特点、行为习惯、说话方式...'
        }
      ],
      // 快速笔记
      quickNote: '',
      // 活跃的工具面板
      activeTools: ['outline'],
      // 保存状态
      saving: false,
      saveStatus: '已保存',
      // 新建作品对话框
      newBookDialogVisible: false,
      newBookForm: {
        name: '',
        category: '',
        description: '',
        targetWords: 30
      },
      // 作品分类
      categories: [
        { value: 'xuanhuan', label: '玄幻' },
        { value: 'qihuan', label: '奇幻' },
        { value: 'wuxia', label: '武侠' },
        { value: 'xianxia', label: '仙侠' },
        { value: 'dushi', label: '都市' },
        { value: 'lingyi', label: '灵异' }
      ]
    }
  },
  computed: {
    // 渲染后的内容（这里应该集成 markdown 渲染器）
    renderedContent() {
      return this.currentChapter.content
    },
    // 写作进度
    writingProgress() {
      return Math.round((this.currentBook.wordCount / this.currentBook.targetWords) * 100)
    }
  },
  methods: {
    // 处理下拉菜单命令
    handleCommand(command) {
      if (Array.isArray(command)) {
        if (command[0] === 'switchBook') {
          this.switchBook(command[1])
        }
      } else if (command === 'newBook') {
        this.newBookDialogVisible = true
      }
    },
    // 切换作品
    switchBook(bookId) {
      // 实现切换作品的逻辑
      this.currentBookId = bookId;
    },
    // 创建新作品
    createNewBook() {
      // 实现创建新作品的逻辑
      this.newBookDialogVisible = false
    },
    // 创建新章节
    createNewChapter() {
      // 实现创建新章节的逻辑
    },
    // 点击章节节点
    handleNodeClick(data) {
      // 实现切换章节的逻辑
      this.currentChapter = data;
    },
    // 保存章节
    saveChapter() {
      this.saving = true
      // 模拟保存操作
      setTimeout(() => {
        this.saving = false
        this.saveStatus = '已保存'
      }, 1000)
    },
    // 发布章节
    publishChapter() {
      // 实现发布章节的逻辑
    },
    // 进度格式化
    // eslint-disable-next-line no-unused-vars
    progressFormat(_percentage) {
      return `${this.currentBook.wordCount}/${this.currentBook.targetWords}字`
    }
  }
}
</script>

<style scoped>
.writer-create-page {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding-top: 60px;
}

.writer-layout {
  display: flex;
  min-height: calc(100vh - 100px);
  padding: 15px;
  gap: 15px;
}

/* 左侧边栏样式 - 现代简约风格 */
.writer-sidebar {
  width: 250px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.current-book {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
}

.current-book:hover {
  background-color: #f5f7fa;
}

.book-name {
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

.sidebar-content {
  flex: 1;
}

.chapter-tools {
  padding: 10px;
  display: flex;
  gap: 10px;
}

.chapter-list {
  padding: 0 10px 10px;
}

/* 简化章节节点样式 */
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
}

.chapter-title {
  color: #333;
}

.chapter-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.word-count {
  color: #909399;
  font-size: 12px;
}

/* 主编辑区域样式 - 简化边框和阴影 */
.writer-main {
  flex: 1;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.editor-header {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chapter-title-input {
  width: 400px;
}

.header-right {
  display: flex;
  gap: 12px;
}

.editor-main {
  flex: 1;
  display: flex;
}

.editor-main.edit .editor-container {
  width: 100%;
}

.editor-main.preview .editor-container {
  display: none;
}

.editor-main.preview .preview-container {
  width: 100%;
}

.editor-container,
.preview-container {
  flex: 1;
}

.half-width {
  width: 50% !important;
}

.editor-toolbar {
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  gap: 10px;
  align-items: center;
}

.editor-content {
  padding: 10px;
}

.preview-content {
  padding: 10px;
}

.editor-footer {
  padding: 10px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-left {
  display: flex;
  gap: 10px;
  color: #909399;
}

.footer-right {
  width: 200px;
}

/* 右侧工具栏样式 - 简化设计 */
.writer-tools {
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.tools-section {
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.section-title {
  padding: 12px;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid #f0f0f0;
}

.tools-content {
  padding: 10px;
}

.outline-tree {
  padding: 5px 0;
}

.material-list {
  padding: 5px 0;
}

.material-item {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.material-item:last-child {
  border-bottom: none;
}

.material-title {
  font-weight: 500;
  margin-bottom: 4px;
}

.material-preview {
  font-size: 12px;
  color: #909399;
}

.ai-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-tools .el-button {
  width: 100%;
  justify-content: flex-start;
}

/* 修改el-tree默认样式使其更简洁 */
:deep(.el-tree-node__content) {
  height: auto;
  padding: 4px 0;
}

:deep(.el-tree-node:focus > .el-tree-node__content) {
  background-color: transparent;
  color: #409EFF;
}

:deep(.el-tree-node__expand-icon) {
  padding: 0;
  margin-right: 4px;
}

:deep(.el-tree-node__content:hover) {
  background-color: transparent;
}

:deep(.el-button--text) {
  padding: 0;
}

/* 修改下拉菜单和标签样式 */
:deep(.el-tag--mini) {
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
}

/* 单位样式 */
.unit {
  margin-left: 8px;
  color: #909399;
}
</style> 